<template>
    <div class="subapp">
        <van-nav-bar
            title="提交申请"
            left-arrow
            @click-left="onClickLeft"
            @click-right="onClickRight"/>
            <div class="box">
                <dl class="dl1" @click="leaveClisk">
                    <dt><van-icon name="todo-list-o" /></dt>
                    <dd>请假申请</dd>
                </dl>
                 <dl class="dl2">
                    <dt><van-icon name="credit-pay" /></dt>
                    <dd>补卡申请</dd>
                </dl>
                 <dl class="dl3">
                    <dt><van-icon name="hotel-o" /></dt>
                    <dd>出差申请</dd>
                </dl>
            </div>

            <router-view/>
    </div>
</template>
<script>
import { Toast } from 'vant';
import { useRouter} from 'vue-router'
export default {
    setup() {
        const router=useRouter()
        // 点击返回
        const onClickLeft = () => Toast('返回');
        // 点击跳转请假申请页面
        const leaveClisk=()=>{
            router.push('/leave')
        }
        // 点击跳转补卡申请页面

        // 点击跳转出差申请页面

        return {
            onClickLeft,
            leaveClisk,

        };
    },
}
</script>
<style lang="scss" scoped>
.subapp{
    width: 100%;
    height: 100%;
}
.box{
    width: 100%;
    display: flex;
    flex-wrap:wrap;
    box-sizing: border-box;
    padding: 10px;
    dl{
        width: 48%;
        height: 188px;
        border-radius: 10px;
        margin-bottom: 10px;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        dt{
            font-size: 38px;
            box-sizing: border-box;
            padding: 15px;
        }
    }
    .dl1{
        background: #0090FD;
        margin-right: 10px;
    }
    .dl2{
        background: #24DE55;
    }
    .dl3{
        background: orange;
    }
}
</style>